<template>
  <div class="box">
    <div class="oneKey">
      <div class="oneKey_close" @click="toCodeLogin">
        <van-icon name="cross" />
      </div>
      <div class="oneKey_title">
        <p>快捷登录</p>
        <p>您好，欢迎使用爱美</p>
      </div>
      <p class="oneKey_zgyd">中国移动提供认证服务</p>
      <p class="oneKey_tel">{{userTel}}</p>
      <button @click="submit">本机号码一键登录</button>
      <p class="oneKey_code" @click="toCodeLogin">验证码登录</p>
      <div class="oneKey_protocol">
        <input v-model="checkbox" type="checkbox">
        <p>
          登录/注册代表您已同意
          <span @click="goChinaMobileCertification">《中国移动认证服务条款》</span>
          和
          <span @click="goUserAgreement">《爱美用户使用协议》</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import { getOneLogin } from '../../api'
import Vue from 'vue'
import { Icon, Toast } from 'vant'
Vue.use(Icon)
Vue.use(Toast)
export default {
  data () {
    return {
      userTel: localStorage.getItem('userTel_AM'),
      checkbox: false
    }
  },
  methods: {
    goUserAgreement () {
      this.$router.push('/userAgreement')
    },
    goChinaMobileCertification () {
      this.$router.push('/chinaMobileCertification')
    },
    submit () {
      if (this.checkbox === false) {
        Toast('请认真阅读用户协议并确定后在登录')
      } else {
        getOneLogin({
          username: localStorage.getItem('userTel_AM'),
          token: localStorage.getItem('token_AM')
        }).then(res => {
          if (res.data.code === '200') {
            localStorage.setItem('loginState_AM', 'ok')
            this.$router.replace('/user')
          } else if (res.data.code === '300') {
            Toast('您的身份认证已过期，请重新登录')
            this.toCodeLogin()
          }
        })
      }
    },
    toCodeLogin () {
      localStorage.removeItem('userTel_AM')
      localStorage.setItem('isLogin_AM', '0')
      this.$router.go(0)
    }
  },
  mounted () {
    this.userTel = this.userTel.substring(0, 3) + '****' + this.userTel.substring(7, 11)
  }
}
</script>

<style lang="scss" scoped>
.oneKey {
  width: 100%;
  height: auto;
  padding: 0 0.3rem;
  .oneKey_close {
    width: 100%;
    height: 0.24rem;
    margin-top: 0.35rem;
    margin-bottom: 0.18rem;
    .van-icon-cross {
      font-size: 0.24rem;
      float: right;
    }
  }
  .oneKey_title {
    width: 100%;
    height: 0.44rem;
    margin-bottom: 1.1rem;
    p:nth-of-type(1) {
      width: 100%;
      height: 0.18rem;
      line-height: 0.18rem;
      color: #181818;
      font-size: 0.18rem;
      margin-bottom: 0.1rem;
    }
    p:nth-of-type(2) {
      width: 100%;
      height: 0.16rem;
      line-height: 0.16rem;
      color: #626262;
      font-size: 0.14rem;
    }
  }
  .oneKey_zgyd {
    width: 100%;
    height: 0.12rem;
    font-size: 0.12rem;
    text-align: center;
    line-height: 0.12rem;
    margin-bottom: 0.2rem;
  }
  .oneKey_tel {
    width: 100%;
    height: 0.2rem;
    font-size: 0.2rem;
    line-height: 0.2rem;
    color: #171717;
    text-align: center;
    margin-bottom: 0.4rem;
  }
  button {
    width: 100%;
    height: 0.45rem;
    background:linear-gradient(0deg,rgba(250,100,140,1) 42%,rgba(255,131,238,1) 100%);
    text-align: center;
    font-size: 0.14rem;
    color: #FFFFFF;
    line-height: 0.45rem;
    border: none;
    border-radius: 0.22rem;
    margin-bottom: 0.13rem;
  }
  .oneKey_code {
    width: 100%;
    height: 0.14rem;
    line-height: 0.14rem;
    color: #F53076;
    font-size: 0.14rem;
    text-align: center;
    margin-bottom: 2rem;
  }
  .oneKey_protocol {
    width: 100%;
    height: 0.28rem;
    line-height: 0.14rem;
    font-size: 0.12rem;
    color: #171717;
    input {
      width: 0.2rem;
      height: 0.2rem;
      float: left;
      margin: 0.04rem 0.13rem;
    }
    span {
      color: #236FEE;
    }
  }
}
</style>
